@use 'sass:map';

@use './shared' as *;
@use './design' as *;

$anchor: () !default;
$anchor: map.merge(
  (
    link-color: get-css-var('content-color-base'),
    link-color-hover: get-css-var('color-primary-light-1'),
    link-color-active: get-css-var('color-primary-base'),
    track-width: 2px,
    track-style: solid,
    track-color: get-css-var('border-color-light-2'),
    track: get-css-var('anchor-track-width') get-css-var('anchor-track-style')
      get-css-var('anchor-track-color'),
    track-color-active: get-css-var('anchor-link-color-active'),
    pointer-size: 8px,
    pointer-bg-color: get-css-var('color-white'),
    pointer-b-color: get-css-var('anchor-link-color-active'),
    pointer-border: get-css-var('border-shape') get-css-var('anchor-pointer-b-color')
  ),
  $anchor
);

.#{$namespace}-anchor {
  &-vars {
    @include define-preset-values('anchor', $anchor);
  }

  @include basis;

  position: relative;
  display: flex;
  flex-direction: column;
  padding-inline-start: calc(get-css-var('anchor-pointer-size') * 0.5);
  vertical-align: middle;

  &__list {
    padding: 0;
  }

  &__item {
    display: flex;
    flex-direction: column;
  }

  &__link {
    padding: 4px 14px;
    margin-inline-start: calc(get-css-var('anchor-track-width') * -1);
    color: get-css-var('anchor-link-color');
    text-decoration: none;
    cursor: pointer;
    border-inline-start: get-css-var('anchor-track');
    transition: get-css-var('transition-color'), get-css-var('transition-border');

    &:hover {
      color: get-css-var('anchor-link-color-hover');
    }

    &--active {
      color: get-css-var('anchor-link-color-active');
    }
  }

  &--no-marker &__link--active {
    border-inline-start-color: get-css-var('track-color-active');
  }

  &__marker {
    position: absolute;
    inset-inline-start: calc(get-css-var('anchor-pointer-size') * 0.5 - 1px);
    display: flex;
    align-items: center;
    justify-content: center;
    will-change: top;
    transition: top get-css-var('transition-base');
    transform: translate3d(-50%, -50%, 0);

    @include rtl {
      transform: translate3d(50%, -50%, 0);
    }
  }

  &__pointer {
    width: get-css-var('anchor-pointer-size');
    height: get-css-var('anchor-pointer-size');
    background-color: get-css-var('anchor-pointer-bg-color');
    border: get-css-var('anchor-pointer-border');
    border-radius: get-css-var('anchor-pointer-size');
  }
}
